<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="#(basePath)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css"
	href="css/chatlist.css" />
<link rel="stylesheet" type="text/css"
	href="bootstrap-3.3.7/css/bootstrap.css" />
<link rel="stylesheet" type="text/css"
	href="bootstrap-selected/bootstrap-selected.css" />	
<script src="js/jquery.min-v1.11.3.js"></script>	
<script src="bootstrap-selected/bootstrap-selected.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="lib/protobuf/long.js"></script>
<script src="lib/protobuf/bytebuffer.js"></script>
<script src="lib/protobuf/protobuf.js"></script>
<script src="lib/vue/vue.js"></script>
<script src="lib/talent/talent.js"></script>

<style type="text/css">
.navbar-default .navbar-toggle {
 	border-color: #fff;
}
.send {
	padding: 0px;
}

.green {
	background-color: green;
	color: #fff;
}

.red {
	background-color: red;
	color: #fff;
}
#chat{
	min-height: 34em;
    overflow: auto;
}
.dropdown-menu {
	max-height: 151px !important;
}
#room-close-tips {
    position: fixed;
    margin-top: 4.0em;
    z-index: 1;
}
</style>
</head>
<body>
	<div class="container-fluid">
		<nav class="navbar navbar-default navbar-fixed-top">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<!--  <button id="show-users" type="button" class="navbar-toggle hidden collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="glyphicon glyphicon-align-justify"></span>
	      </button> -->
				<button id="show-users" type="button" class="navbar-toggle hidden"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<button id="add-room" type="button" class="navbar-toggle" data-toggle="modal" data-target="#show-add-room">
					<span class="glyphicon glyphicon-plus" aria-hidden="true" aria-label="添加会议"></span>
				</button>
				<a class="navbar-brand" href="javascript:;"><span
					class="glyphicon glyphicon-menu-left" id="room-back" onclick="window.history.back(); "></span>
					<span id="head-title">在线会议</span></a>

			</div>
			<div class="collapse navbar-collapse hidden"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav list-group">

				</ul>
			</div>
		</nav>
		<div id="tip" class="hidden"></div>

		<div id="connection" class="hidden">
			Server <input name='' id='server' value='#(ip)' /> : <input
				name='' id='port' value='#(port)' style='width: 50px;' />, 连接个数: <input
				name='' id='count' value='1' style='' /> <input type='button'
				value='连接并进入群组' onclick='connectionBtnClicked();'> <input
				id="userid" value="#(userid)"> <input id="nickname"
				value="#(nickname)">
		</div>
		<!-- 会议结束警告框 -->
		<div id="close-tips"> </div>
		<!-- 会议结束警告框 -->
		<!-- 聊天组 -->
		<ul class="list-group" id="chatGroups" style="margin-top: 4.5em;">
			#for(item: list)
			<li class="list-group-item"><span data-name="#(item.name)"
				data-id="#(item.id)" onclick="addTGroup(this)">#(item.name)</span>
				#if(item.cid == userid)
				<button data-id="#(item.id)" class="btn btn-danger btn-xs rightt del-room" >结束</button>#end
				</li> 
			#end
		</ul>
		<!-- 聊天组 -->
		
		<!-- 聊天页-->
		<div id="chatPage" class="hidden" style="margin: 5.5em 0em;">
			<div id="chat">
			</div>
			<!-- 聊天页-->
			<!-- 发送 -->
			<div class="navbar-fixed-bottom col-xs-12 col-md-12">

				<div class="col-xs-10 col-md-10 send">
					<textarea name='' id='text' rows="1" class=" form-control">hello!</textarea>
				</div>
				<div class=" col-xs-2 col-md-2 send">
					<button class=" btn btn-default" type='button' value='发送'
						onclick='sendBtnClicked();'>发送</button>
				</div>
			</div>
		</div>
		<!-- 发送 -->
	</div>
<!-- 添加会议的模态框 -->
<div class="modal fade" id="show-add-room" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加会议</h4>
      </div>
      <div class="modal-body">
       
       <form id="room-form" action="room/saveRoom" method="post">
       	   <div class="form-group">
		    <label >参会人员</label>
		    <input name="cid" value="#(userid)" class="hidden">
		   <select id="usertype" name="ids" class="selectpicker show-tick form-control" multiple data-live-search="true" title="选择参会人员">
                                        #for(item: members)
                                        <option value="#(item.user_id)">#(item.realname)</option>
                                        #end
            </select>
		  </div>
		  <div class="form-group">
		    <label >会议名</label>
		    <input type="text" class="form-control" name="name" id="name" placeholder="会议名">
		  </div>
		  <div class="form-group">
		    <label >会议主题</label>
		    <input type="text" class="form-control" name="discript" id="dsicript" placeholder="会议主题">
		  </div>
		</form>
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-danger add-room-form">添加</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->	
<!-- 添加会议的模态框 -->
	
</body>

<script src="js/im.js"></script>
<script src="js/action.js"></script>
</html>